import React, {useState, useEffect} from "react";
import { Button, List, Table } from 'antd';

import { fieldGet } from "../common/common";
import http from "../request";

const Footer = (props) => {

    const { isshow } = props

    if(isshow === 'house'){
        var { info, setOpe, setOpeVal, followGet, setmapshow, setCenter, setFollow, setEstateShow, setEstateId, setEstateTab, setOpeImg } = props
    }

    if(isshow === 'client'){
        info = props.info
        var {genj} = props
    }

    // 表格配置
    const columns = [
            {
                key: 'content',
                align: 'left',
                dataIndex: 'content'
            }, {
                key: 'follow_up_staff_data',
                align: 'left',
                width:200,
                // dataIndex: 'follow_up_staff_data',
                render: e => (e?.follow_up_staff_data?.store?.name ?? '') + '-' + (e?.follow_up_staff_data?.nickname ?? '')
            }, {
                key: 'follow_up_time',
                align: 'center',
                width:120,
                dataIndex: 'follow_up_time'
            }
    ]
    const clientcolumns = [
            {
                key: 'content',
                align: 'left',
                dataIndex: 'content'
            }, {
                key: 'follow_up_staff_data',
                align: 'left',
                width:200,
                // dataIndex: 'follow_up_staff_data',
                render: e => (e?.store_data?.name ?? '') + '-' + (e?.staff_data?.nickname ?? '')
            }, {
                key: 'time_text',
                align: 'center',
                width:120,
                dataIndex: 'time_text'
            }
    ]

    const [client_xx,setclient_xx] = useState(!1)
    const [followList, setFollowList] = useState([])

    useEffect(()=>{
        setclient_xx(!1)
        if(info && isshow === 'client') followGet()
    },[info])

    return (
        <div>
            <div>
                {/* Copyright@学位通信息咨询（深圳）有限公司 */}

                {
                    isshow === 'house' ?
                        (
                            <div className="u-flex-top u-m-20" style={{backgroundColor: '#fff'}}>
                                <List bordered size='small' style={{ width: 300, height: 210 }}>
                                    <List.Item>{`【 ${info?.estate_data?.name ?? ''} 】 ${(info?.num_room ?? '')} 租${info?.rental?.split(',')[0] ?? ''}元/月`}</List.Item>
                                    <List.Item>{(info?.house_owner_data ?? []).map(i => (` ${i.name}  ${(i.mobile)} `))}</List.Item>
                                    <List.Item>{`${(info?.house_staff_data ?? []).map(i => (`  ${i.store.name}  ${i.employee.nickname}`))} [${info?.entrust ?? ''}委托]`}</List.Item>
                                </List>
                                {!info ? (<List style={{flex:1, height: 208 }}></List>) : (<Table bordered showHeader={false} style={{flex:1, height: 210}} size="small" rowKey={e => e.id} scroll={{ y: 210 }} dataSource={info?.house_follow_up_data ?? []} columns={columns} pagination={false}/>)}
                                <List className="u-list" bordered size='small' style={{ width:120, height: 210 }}>
                                    <List.Item className="u-flex-col u-col-center"><Button size="small" onClick={()=>{
                                        info && setOpe(!0)
                                        info && setOpeVal(info)
                                        info && followGet()
                                    }}>看跟进</Button></List.Item>
                                    <List.Item className="u-flex-col u-col-center"><Button size="small" onClick={()=>{
                                        info && setOpeImg(!0)
                                    }}>看照片</Button></List.Item>
                                    <List.Item className="u-flex-col u-col-center"><Button size="small" onClick={()=>{
                                        info && setOpe(!0)
                                        info && setOpeVal(info)
                                        info && followGet()
                                        info && setFollow({ show: !0 })
                                    }}>写跟进</Button></List.Item>
                                    <List.Item className="u-flex-col u-col-center"><Button size="small" onClick={()=>{
                                        info && setmapshow(!0)
                                        info && setCenter({
                                            longitude: parseFloat(info.estate?.longitude_latitude?.split(',')[0] ?? '0'),
                                            latitude: parseFloat(info.estate?.longitude_latitude?.split(',')[1] ?? '0')
                                        })
                                    }}>查地图</Button></List.Item>
                                    <List.Item className="u-flex-col u-col-center"><Button size="small" onClick={()=>{
                                        info && setEstateTab('4')
                                        info && setEstateShow(!0)
                                        info && setEstateId(info.estate_id)
                                    }}>学校</Button></List.Item>
                                </List>
                            </div>
                        ) : isshow === 'client' ? 
                        (
                            <div className="u-flex-top u-m-t-20" style={{width:'100%'}}>
                                <List bordered size='small' style={{ backgroundColor: '#fff', width: 300, height: 210 }}>
                                    <List.Item>{`【${info?.name ?? ''}】  ${info?.mobile ?? ''}`}</List.Item>
                                    <List.Item>{`${info?.transaction?.split('-')[1] ?? ''} : ${info?.city ?? ''}.${info?.region ?? ''}.${info?.areas ?? ''}.${info?.purpose ?? ''}`}</List.Item>
                                    <List.Item>{info?.memo ?? ''}</List.Item>
                                    <List.Item>{`${info?.store_id_one_data?.name ?? ''}  ${info?.staff_id_one_data?.nickname ?? ''}  [${info?.entrust ?? ''}委托]`}</List.Item>
                                </List>
                                <div className="u-flex" style={{ backgroundColor: '#fff', flex:1, height: 210 }}>
                                    {
                                        !client_xx ? (
                                        <>
                                            <Table bordered showHeader={false} style={{flex:1, height: 210}} size="small" rowKey={e => e.id} scroll={{ y: 210 }} dataSource={followList} columns={clientcolumns} pagination={false}/>
                                        </>) : 
                                        <>
                                            <List bordered size='small' style={{ backgroundColor: '#fff', flex:1, height: 210 }}>
                                                <List.Item>{info?.link_man ?? ''}</List.Item>
                                                <List.Item>{2}</List.Item>
                                                <List.Item>{`面积${info?.area ?? ''}`}</List.Item>
                                                <List.Item>{`价格${info?.price ?? ''}`}</List.Item>
                                            </List>
                                            <List bordered size='small' style={{ backgroundColor: '#fff', flex:1, height: 210 }}>
                                                <List.Item>{5}</List.Item>
                                                <List.Item>{info?.level ?? ''}</List.Item>
                                                <List.Item>{info?.state ?? ''}</List.Item>
                                                <List.Item>{info?.source ?? ''}</List.Item>
                                            </List>
                                            <List bordered size='small' style={{ backgroundColor: '#fff', flex:1, height: 210 }}>
                                                <List.Item>{info?.purpose ?? ''}</List.Item>
                                                <List.Item>{info?.type ?? ''}</List.Item>
                                                <List.Item>{1}</List.Item>
                                                <List.Item>{2}</List.Item>
                                            </List>
                                            <List bordered size='small' style={{ backgroundColor: '#fff', flex:1, height: 210 }}>
                                                <List.Item>{info?.floor ?? ''}</List.Item>
                                                <List.Item>{info?.orientation ?? ''}</List.Item>
                                                <List.Item>{5}</List.Item>
                                                <List.Item>{6}</List.Item>
                                            </List>
                                        </>
                                    }
                                </div>
                                <List bordered size='small' style={{ backgroundColor: '#fff', width: 100, height: 210 }}>
                                    <List.Item><Button size="small" onClick={()=>setclient_xx(!client_xx)}>{client_xx ? '看详细' : '看跟进'}</Button></List.Item>
                                    <List.Item><Button size="small" onClick={()=>genj({ show: !0 })}>写跟进</Button></List.Item>
                                </List>
                            </div>
                        ) : ''
                }

            </div>
            <div className="u-m-auto u-m-t-20" style={{ lineHeight: 3 }}>Copyright@学位通信息咨询（深圳）有限公司</div>

            
        </div>
    )

    function followGet() {
        http('client.follow.index',
            fieldGet(
                { guest_id: info?.id ?? '' },
                { guest_id: '=' },
            )
        ).then(res => {
            if (res.code === 1) {
                console.log(res);
                setFollowList(res.data.rows)
            }
        }).catch(err=>console.log(err))
    }
    
}

export default Footer;